<?php
/**
 * The template for displaying all single posts and attachments
 *
 * @package WordPress
 * @subpackage Twenty_Sixteen
 * @since Twenty Sixteen 1.0
 */

get_header(); ?>
<div class="con_5">
	<div class="small-nav">
		<?php
		$category = get_the_category();
		$page_data=get_page($page_id);
		
		echo'当前位置：&nbsp;';
		echo'<a href="';
		echo bloginfo('url');
		echo'">首页&nbsp;</a>&nbsp;&nbsp;>&nbsp;';
		echo'<a href="'.$category[0]->cat_url.'">';
		echo $category[0]->cat_name;
		echo'</a>&nbsp;&nbsp;>';
		echo $page_data->post_title;
			
		?>
	</div>



<script type="text/javascript" src="<?echo bloginfo('url')?>/wp-content/plugins/xx/js/jquery.js"></script>
	
<style type="text/css">
body,ul,li{padding: 0; margin: 0;}
ul,li{list-style: none;}
body{font-size:12px;}

#demo1{ 
    position: relative;    
  width:900px;
    
}
#demo1 .img_list{overflow: hidden; position: relative; min-height: 600px;}
/* 根据图片的张数来设定ul的宽度 */
.img_list ul{ width: 4500px; position: absolute; height: 600px; left: 0px;}
.img_list li{ float: left; width: 900px;}
.img_list img{  width: 900px; height: auto;}

/* 图片对应的按钮样式 */
.btn_list{}
.btn_list ul{ position: absolute; left: 150px; bottom:-122px; }
.btn_list li{ float: left; margin-right: 20px; color: #999; border: 1px solid #ccc; }
.btn_list li:hover,.btn_list li.on{ cursor: pointer; border: 1px solid #E204A4;}
.btn_list li img{ width: 90px; height: 90px; display: block;}
/* 左右点击的按钮样式 */
#demo1 .toLeft,#demo1 .toRight{
    display: none;
    position: absolute;
    width: 20px;
    height: 30px;    
   bottom: -90px;    
    background: url(<?echo bloginfo('url')?>/wp-content/plugins/xx/image/zbbg_24.png) no-repeat 0 -150px;
}

/* 图片对应的说明*/
.img_intro{
    position: absolute;
    bottom: -180px;
    left: 0;
    width: 100%;
    height: 25px;
}
.img_intro .img_intro_bg,.img_intro .text{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.img_intro .img_intro_bg{
    background: #000;    
    opacity: .3;
    z-index: 999;
}
.img_intro .text{
    padding: 5px 10px;
    z-index: 1000;
    color: #999;
}
#demo1 .toLeft{
    left: 120px;
}
#demo1 .toRight{
    right: 120px;
    background-position: -50px -150px;
}
</style>
	
	<div class="x-slider" id="demo1">
		<div class="img_list">
			<ul>
				<?php all_img($post->post_content);?>
			</ul>
		
		
		</div>
		<div class="btn_list">
			<ul>
			
			</ul>
		</div>
		
		<div class="img_intro">
			<div class="text"><a href="#" target="_blank"></a></div>
			<div class="img_intro_bg"></div>            
		</div>
		<a href="#" id="toLeft" class="link toLeft"></a>
		<a href="#" id="toRight" class="link toRight"></a>
	
	
	<div class="z-page">
		<?php
		// Start the loop.
		while ( have_posts() ) : the_post();
		
	
		if ( is_singular( 'attachment' ) ) {
				// Parent post navigation.
				the_post_navigation( array(
					'prev_text' => _x( '<span class="meta-nav">Published in</span><span class="post-title">%title</span>', 'Parent post link', 'twentysixteen' ),
				) );
			} elseif ( is_singular( 'post' ) ) {
				// Previous/next post navigation.
				the_post_navigation( array(
					'next_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Next', 'twentysixteen' ) . '</span> ' .
						'<span class="screen-reader-text">' . __( 'Next post:', 'twentysixteen' ) . '</span> ' .
						'<span class="post-title">%title</span>',
					'prev_text' => '<span class="meta-nav" aria-hidden="true">' . __( 'Previous', 'twentysixteen' ) . '</span> ' .
						'<span class="screen-reader-text">' . __( 'Previous post:', 'twentysixteen' ) . '</span> ' .
						'<span class="post-title">%title</span>',
				) );
			}

			// End of the loop.
		endwhile;
		?>
	
	</div>
	
	
</div>
<script type="text/javascript">
var index = 0;
var timer = 0;
var ulist = $('.img_list ul');
var blist = $('.btn_list ul');
var list = ulist.find('li');
var llength = list.length;//li的个数，用来做边缘判断
var lwidth = $(list[0]).width();//每个li的长度，ul每次移动的距离
var uwidth = llength * lwidth;//ul的总宽度

function init(){
	//生成按钮(可以隐藏)
	addBtn(list);
	//显示隐藏左右点击开关
	$('.link').css('display', 'block');
	$('.link').bind('click', function(event) {
		var elm = $(event.target);
		doMove(elm.attr('id'));
		return false;
	});

	//初始化描述
	var text = ulist.find('li').eq(0).find('img').attr('alt');
	var link = ulist.find('li').eq(0).find('a').attr('href');
	$('.img_intro .text a').text(text);
	$('.img_intro .text a').attr('href',link);
	auto();
}

function auto(){
	//定时器
	timer = setInterval("doMove('toRight')",3000);

	$('.img_list li, .btn_list li').hover(function() {
		clearInterval(timer);
	}, function() {
		timer = setInterval("doMove('toRight')",3000);
	});
}

function changeBtn(i){
	blist.find('li').eq(i).addClass('on').siblings().removeClass('on');
	var text = ulist.find('li').eq(i).find('img').attr('alt');
	var link = ulist.find('li').eq(i).find('a').attr('href');
	$('.img_intro .text a').text(text);
	$('.img_intro .text a').attr('href',link);
}

function addBtn (list){
	for (var i = 0; i < list.length; i++) {
		var imgsrc = $(list[i]).find('img').attr('src');            
		var listCon = '<li><img src="'+imgsrc+'""></li>';         
		$(listCon).appendTo(blist);
		//隐藏button中的数字
		//list.css('text-indent', '10000px');
	};
	blist.find('li').first().addClass('on');
	blist.find('li').click(function(event) {
		var _index = $(this).index();            
		doMove(_index);
	});
}

function doMove(direction){
	//向右按钮
	if (direction =="toRight") {
		index++;
		if ( index< llength) {
			uwidth = lwidth *index;
			ulist.css('left',-uwidth);
			//ulist.animate({left: -uwidth}, 1000);

		}else{
			ulist.css('left','0px');
			index = 0;
		}; 
	//向左按钮           
	}else if(direction =="toLeft"){
		index--;
		if ( index < 0) {
			index = llength - 1;                
		}
		uwidth = lwidth *index;
		ulist.css('left',-uwidth);
		//ulist.animate({left: -uwidth}, "slow");    
	//点击数字跳转  
	}else{
		index = direction;
		uwidth = lwidth *index;
		ulist.css('left',-uwidth);
	};
	changeBtn(index);
}
init();
</script>
	



</div>

<?php get_footer(); ?>
